<template>
    <div>
<!--        1.返回 收藏 转发 快捷入口-->
        <div>
            <van-row justify="space-between">
                <van-col span="8">
                    <van-nav-bar
                            left-text="返回"
                            left-arrow
                            @click-left="tzback()"
                    />
                </van-col>
                <van-col span="8">
                    <van-grid clickable :column-num="3">
                        <van-grid-item class="three" icon="star-o"  to="" />
                        <van-grid-item class="three" icon="share-o"  to="" />
                        <van-grid-item class="three" icon="ellipsis"  to="" />
                    </van-grid>
                </van-col>
            </van-row>
        </div>
<!--        2.轮播图 懒加载-->
        <div>
            <van-swipe :autoplay="3000" lazy-render>
                <van-swipe-item v-for="image in images" :key="image">
                    <img class="img1" :src="image" />
                </van-swipe-item>
            </van-swipe>
        </div>
<!--        3.店铺介绍-->
        <div>
            <!-- 左对齐 -->
            <van-row>
                <van-col span=""><h3>最强音量贩式KTV</h3></van-col>
            </van-row>
            <!-- 两端对齐 -->
            <van-row justify="space-between" class="hj1">
                <van-col span=""><van-rate v-model="value" readonly /><font color="red">3.1</font>详情></van-col>
                <van-col span="">13228条</van-col>
                <van-col span="">￥36/人</van-col>
                <van-col span="">大上海城</van-col>
            </van-row>
            <!-- 两端对齐 -->
            <van-row justify="space-between" class="hj2">
                <van-row gutter="10">
                    <van-col span="">环境：3.1</van-col>
                    <van-col span="">音效：3.1</van-col>
                    <van-col span="">服务：3.1</van-col>
                </van-row>
                <van-col span="">量贩式KTV></van-col>
            </van-row>
        </div>
        <van-divider />
<!--        4.营业时间-->
        <div>
            <van-row gutter="10" class="hj3">
                <van-col span="">营业中</van-col>
                <van-col span="">周一至周日</van-col>
                <van-col span="">12：00-06:00</van-col>
            </van-row>
            <van-row gutter="10" class="hj3">
                <van-col span=""><div class="q1"><font color="#ff8c00">收录8年</font></div></van-col>
                <van-col span=""><div class="q2"><font color="">Wi-Fi</font></div></van-col>
            </van-row>
        </div>
        <van-divider />
<!--        5.地址-->
        <div>
            <van-row gutter="10" class="hj3">
                <van-col span="14" style="text-align: left;font-size: 0.8rem"><div>东太康路50号光彩商场4楼(大上海城南门对面)</div><span style="color: lightsteelblue">距地铁1/3号线二七广场站A口步行450m</span></van-col>
                <van-col span="4"></van-col>
                <van-col span="">
                    <van-grid clickable :column-num="2">
                        <van-grid-item class="two" icon="logistics" text="打车" to="" />
                        <van-grid-item class="two" icon="phone-o" text="电话" to="" />
                    </van-grid>
                </van-col>
            </van-row>
        </div>
        <div style="height: 10px;background: darkgray"></div>
<!--        6.底部导航-->
        <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
            <van-tabbar-item icon="location-o">打卡</van-tabbar-item>
            <van-tabbar-item icon="video-o">拍视频</van-tabbar-item>
            <van-tabbar-item icon="photo-o">传照片</van-tabbar-item>
            <van-tabbar-item icon="records">写评价</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    import { ref } from 'vue';
    export default {
        name: "KtvDetail",
        data(){
            return{
                images:[
                    require('../assets/imgs/one01.jpg'),
                    require('../assets/imgs/one02.jpg'),
                    require('../assets/imgs/one03.jpg'),
                    require('../assets/imgs/one04.jpg'),
                    require('../assets/imgs/one05.jpg'),
                ],
                value:3//评分
            }
        },
        methods:{
            tzback() {
                history.back();
            },
        }
    }
</script>

<style scoped>
.three{
    height: 45px;
}
    .img1{
        height: 180px;
        width: 100%;
    }
    .hj1{
        font-size: 0.9rem;
    }
    .hj2{
        font-size: 0.8rem;
    }
    .hj3{
        font-size: 0.8rem;
    }
    .q1{
        background:peachpuff;
    }
    .q2{
        background: aliceblue;
        margin-top: 2.5px;
    }
    .two{
        height: 50px;
    }
</style>